<template>
  <div class="two">
    <Info1></Info1>
    <dv-border-box-9 style="width: 1800px;height: 600px;">
      <h2 style="color:white;text-align: center;padding-top: 35px;">关键词及权重</h2>
      <dv-capsule-chart class="left" :config="byd" style="width:500px;height:350px" />
      <dv-capsule-chart class="right" :config="tsl" style="width:500px;height:350px" />
      <dv-decoration-7 class="bydtitle" style="width:200px;height:30px;color:white;">比亚迪宋PLUS DM-i</dv-decoration-7>
      <dv-decoration-7 class="tsltitle" style="width:200px;height:30px;color:white;">特斯拉Model Y</dv-decoration-7>
    </dv-border-box-9>
  </div>
</template>

<script>
import Info1 from '@/components/info/Info1.vue'
export default {
  components: {
    Info1
  },
  data() {
    return {
      byd: {
        data: [
          {
            name: '油耗',
            value: 0.64
          },
          {
            name: '后备箱',
            value: 0.52
          },
          {
            name: '座椅',
            value: 0.36
          },
          {
            name: '发动机',
            value: 0.32
          },
          {
            name: '价格',
            value: 0.24
          },
          {
            name: '空调',
            value: 0.22
          },
        ],
        colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff', '#cbe653'],
        unit: '权重',
        showValue: true
      },
      tsl: {
        data: [
          {
            name: '座椅',
            value: 0.43
          },
          {
            name: '后备箱',
            value: 0.30
          },
          {
            name: '空调',
            value: 0.25
          },
          {
            name: '价格',
            value: 0.24
          },
          {
            name: '轮毂',
            value: 0.24
          },
          {
            name: '底盘',
            value: 0.19
          },
        ],
        colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff', '#cbe653'],
        unit: '权重',
        showValue: true
      }
    }
  },
}
</script>

<style lang="less" scoped>
.two {
  width: 1897px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  .dv-border-box-9 {
    margin-top: 20px;
    position: relative;
    .left {
      position: absolute;
      top: 120px;
      left: 235px;
    }
    .right {
      position: absolute;
      top: 120px;
      right: 235px;
      
    }
    .bydtitle {
      position: absolute;
      top: 60px;
      left: 370px;
    }
    .tsltitle {
      position: absolute;
      top: 60px;
      right: 370px;
    }
  }
}
</style>